<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
	<title>Formularz kontaktowy - HexGames</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
    <meta name="author" content="MonikaK">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript">
	/************** Google Map *********************/

	function loadScript() {
		console.log("siema2");
	  var script = document.createElement('script');
	  script.type = 'text/javascript';
	  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
	      'callback=initialize';
	  document.body.appendChild(script);
	}

	function initialize() {
	    var myLatlng = new google.maps.LatLng(50.071912, 19.943890);
	    var mapOptions = {
	    	      zoom: 13,
	    	      center: myLatlng
	    	    };
	    
	    var map = new google.maps.Map(document.getElementById('templatemo_map'),  mapOptions);
	    var marker = new google.maps.Marker({
	        position: myLatlng,
	        map: map,
	        title: 'Hello World!'
	    });
	}
	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	<script type="text/javascript">
		loadScript();
	</script>
	
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
	<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="css/templatemo_misc.css" rel="stylesheet">
	<link href="css/templatemo_style.css" rel="stylesheet">

	<script src="js/jquery-1.11.1.min.js"></script> 
	<script src="js/jquery.lightbox.js"></script>
	<script src="js/templatemo_custom.js"></script>
	<style type="text/css">
	.templatemo_form input {
	width: 350px;
	font-size: 16px;
	}
	</style>
	
</head>
<body>
	<div class="container">
		<jsp:include page="mainMenu.jsp"></jsp:include>	
		<div id="contact-content">
			<header>
				<h1>Formularz kontaktowy</h1>
			</header>
			<div class="content contact">
				<div class="templatemo_contactmap">
					<div id="templatemo_map"></div>
					<a href="https://goo.gl/maps/s6jhd">
					<img src="images/templatemo_contactiframe.png" alt="contact map">
					</a>
				</div>
			 <form action='Contact' method="POST">
				<div class="templatemo_form">
						<input name="email" type="email" class="form-control" id="email" required placeholder="Twój adres e-mail">
					</div>
					<div class="templatemo_form">
						<input name="subject" type="text" class="form-control" id="subject" required placeholder="Wpisz temat wiadomosci" >
					</div>
					
					<div class="templatemo_form">
						<textarea name="message" rows="10" class="form-control" id="message" required placeholder="Treśc wiadomości"></textarea>
					</div>
					<div class="templatemo_form">
                    	<button type="submit" class="btn btn-primary" id="wyslij" >Wyślij!</button>
                    </div>
			 </form>			
				<address class="content-description">
					<i class="fa fa-map-marker"></i>Warszawska 24, 31-155 Kraków<br>
					<i class="fa fa-envelope"></i><a href="mailto:monika.kobylarczyk@gmail.com">monika.kobylarczyk@gmail.com</a><br>
                    <i class="fa fa-phone"></i>510 099 034<br>
				</address>			
			</div>
		</div>				
	</div>
   
	
</body>
</html>